<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
    <script>
        function addEmp() {
            // 获取用户输入的数据
            let name = document.getElementById("name").value;
            let salary = document.getElementById("salary").value;

            // 创建tr节点
            let trChild = document.createElement("tr");

            // 创建td节点
            let nameTd = document.createElement("td");
            let salaryTd = document.createElement("td");
            let operateTd = document.createElement("td");

            // 创建td的文本
            let nameText = document.createTextNode(name);
            let salaryText = document.createTextNode(salary);

            // 创建超链接节点
            let aChild = document.createElement("a");

            // 创建超链接文本
            let aText = document.createTextNode("删除");

            // 将超链接文本添加到超链接节点
            aChild.appendChild(aText);

            // 为超链接赋予属性
            aChild.href = "javascript:;";
            aChild.onclick = function () {
                this.parentNode.parentNode.remove();
            }

            // 将列中的内容添加到td节点
            nameTd.appendChild(nameText);
            salaryTd.appendChild(salaryText);
            operateTd.appendChild(aChild);

            // 将td添加到tr中
            trChild.appendChild(nameTd);
            trChild.appendChild(salaryTd);
            trChild.appendChild(operateTd);

            // 将tr添加到表格中
            let t = document.getElementById("t");
            t.appendChild(trChild);
        }
    </script>
</head>
<body>
<h1>添加员工信息</h1>
姓名:<input type="text" id="name"><br>
工资:<input type="text" id="salary"><br>
<button onclick="addEmp()">添加</button>
<hr>
<!--
    需求一:添加操作
        在表格中,初始是没有员工的
        当用户在表单元素中输入对应信息后点击添加按钮
        此时会在表格中添加一行新的信息,这一行的信息就是用户输入的员工信息
    需求二:删除操作
        当用户点击了表格中某一行的删除链接后,会删除这一行的数据
        即:删除后该行员工从表格中移除
-->

<table id="t" border="1" style="width: 500px;background-color: #dddddd;">
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>操作</th>
    </tr>
    <!--    <tr>-->
    <!--        <td>admin</td>-->
    <!--        <td>5000</td>-->
    <!--        <td>-->
    <!--            <a href="javascript:;" onclick="">删除</a>-->
    <!--        </td>-->
    <!--    </tr>-->
</table>
</body>
</html>